<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		.test{width: 134px;height: 134px;}
		.big{position: fixed;top: 0;left: 50%;overflow: auto;}
		.img{position: relative;cursor: grab;cursor: -webkit-grab;cursor/*\**/:move \9}
		
		.icon{position:absolute;top: 20px;left: 20px;display:block;width: 20px;height: 20px;background: url("icon.png") no-repeat;outline: none;border:none;}
		.add{left: 50px;background-position: -40px;}
		.zhuan{left: 80px;background-position: -20px;}
		.close{left: 110px;background-position: -60px;}
	</style>
</head>
<body>
	<img src="test.jpg" class="test" id="ele">
	<script src="jquery.min.js"></script>
	<script>
	var hei,wid,ad,d= 0;
	var x = 0;
		$(".test").on("click",function(){
			var img = $(this).css({"height":"auto","width":"auto"});
			hei = $(this).height();
			wid = $(this).width();

			ad = hei/wid;
			img = img.clone();
			img.addClass("img");
			img.attr("id","img");
			$("body").append("<div class='big'>"+img[0].outerHTML+"<input type='button' class='add icon'><input type='button' class='jian icon'><input type='button' class='zhuan icon'><input type='button' class='close icon'></div>");
			$(this).css({"height":"134px","width":"134px"});
			var divhei = window.innerHeight+"px";
			var divwid = window.innerWidth/2+"px";
			$(".big").css({"height":divhei,"width":divwid});
			document.onmousemove = function(e){//阻止ie8图片托拽事件
		        var ev = e || event;
		        ev.cancelBubble=true;
		        ev.returnValue = false;
		    }
			$(".img").on("mousedown",function(e){
				e.preventDefault() //阻止浏览器图片托拽事件
	        	var lf = $(this)[0].offsetLeft;
	        	var to = $(this)[0].offsetTop;
	        	var x = e.clientX-lf;
	        	var y = e.clientY-to;
	            $(document).mousemove(function (event){
	            var ox=event.clientX;
	            var oy=event.clientY;
	            var t=oy-y;
	            var l=ox-x;
        		$('.img').css({top:t,left:l})
	            })
            });
            $(document).mouseup(function (){
	            $(this).unbind("mousemove");
            }); 
		});
		$("body").on("click",".close",function(){
			$(".big").remove();
		});
		$("body").on("click",".add",function(){
			hei += 50;
			wid += 50/ad;
			$(".img").css({"height":hei,"width":wid});
		});
		$("body").on("click",".jian",function(){
			hei -= 50;
			wid -= 50/ad;
			$(".img").css({"height":hei,"width":wid});
		});
		$("body").on("click",".zhuan",function(){
			x+=90;
			console.log(x);
			if(d>4){d=1;}else{d++;}
			$(".img").css("transform","rotate("+x+"deg)");
			var img = document.getElementById("img");
			img.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation="+d+");";
		});

	</script>
</body>
</html>